
YOU MUST HAVE jQuery update Plugin installed for the grid to work.

DOWNLOAD FROM jQuery update plugin for cpg1.5.x http://forum.coppermine-gallery.net/index.php/topic,77595.0.html

You have DYNAMIC BODY ID for displayimage page, thumbnails page, index.php pages, profile page and admin pages.

This way you can add:

body#displayimage {
   YOUR SYLES HERE
}
body#thumbnails {
   YOUR SYLES HERE
}
body#page {
   YOUR SYLES HERE index.php pages
}
body#admin {
   YOUR SYLES HERE
}
body#profile {
   YOUR SYLES HERE
}

You can CUSTOMIZE the thumbnails list and album list brcause they are wrapped in divs id thumbWrapp and albumsWrapp.

This way you can add:

#thumbWrapp {
   background-color: #000000;
}

and more.

1) If you want to use big thumbnails like 300px height:

A) Go to config - Thumbnails settings - Use dimension (width or height or max aspect for thumbnail)* - choose Height from the drop down menu
Max dimension of a thumbnail (width, if you use "exact" in "Use dimension") * - type 300
Height of a thumbnail (only applies if you use "exact" in "Use dimension")* - type 300
Go to FILES - Admin Tools - click Update thumbs and/or resized photos - click Only thumbnails - Select Album - from the drop down menu choose an album - click Submit.
You can also choose All Albums but if you have too many pictures in your gallery then Admin Tools will time out during the process.
B) Open themes/google_images/template.html and change 'targetHeight'  : 80, to 'targetHeight'  : 300
C) Open themes/google_images/style.css FIND:

.thumb_caption,
.thumb_title,
.thumb_filename,
.thumb_num_comments {
	font-size: 60%;
	width: 98%;
	padding: 0.5% 1% 0.5% 1%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
	display: none;
}

 AND REPLACE with:
 
.thumb_caption,
.thumb_title,
.thumb_filename,
.thumb_num_comments {
	font-size: 60%;
	width: 98%;
	padding: 0.5% 1% 0.5% 1%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
	display: inline;
}
.thumb_caption_caption {
	display: block!important;
}
.thumb_title a::before {
  content:"Uploaded by ";
  color: #B9AD84;
}
.thumb_num_comments {
    font-style : italic;
}
.thumbnails #caption img {
    width: auto!important;
    max-width: 10px!important;
	height: auto!important;
}
FOR MORE ADVANCED STYLING you can add (if you have coppermine version cpg1.5.26 or higher):

.thumb_title_views {
     YOUR STYLES for the views HERE
}
.thumb_title_owner {
     YOUR STYLES for uploader name HERE
}

.thumb_caption_caption {
     YOUR STYLES for the caption HERE
}

.thumb_caption_msg_date {
     YOUR STYLES for comment date on Last comments HERE
}

.thumb_caption_author {
     YOUR STYLES for the comment on Last comments HERE
}

.thumb_caption_author a:link {
     YOUR STYLES  for uploader name  on Last comments HERE
}

.thumb_caption_ctime {
     YOUR STYLES for date HERE
}

.thumb_caption_rating {
     YOUR STYLES for rating stars HERE
}
.thumb_caption_rating img {
     YOUR STYLES  for rating stars images HERE
}

.thumb_caption_mtime {
     YOUR STYLES for lasthits date and user IP adress HERE
}

.thumb_filename {
     YOUR STYLES for filename HERE
}

.thumb_num_comments {
     YOUR STYLES for the number of comments on Last comments HERE
}

2) If you want to have filmstrip background images (tile1.gif and tile2.gif) then open themes/google_images/theme.php and FIND:

A) REPLACE:

/******************************************************************************
** Section <<<$template_film_strip>>> - START
******************************************************************************/
// HTML template for filmstrip display
$template_film_strip = <<<EOT
        <tr>
          <td valign="bottom" class="thumbnails filmstrip_background" align="center" style="{THUMB_TD_STYLE}">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                   <td width="50%" align="right"><a id="filmstrip_prev" rel="nofollow" style="cursor: pointer;"><img src="themes/google_images/images/film_prev.png"/></a></td>
                     <td valign="bottom"  style="{THUMB_TD_STYLE}">
                       <div id="film" style="{SET_WIDTH}"><table class="tape" ><tr>{THUMB_STRIP}</tr></table></div>
                     </td>
                   <td width="50%" align="left"><a id="filmstrip_next" rel="nofollow" style="cursor: pointer;"><img src="themes/google_images/images/film_next.png"/></a></td>
                </tr>
            </table>
          </td>
        </tr>
<!-- BEGIN thumb_cell -->
                <td class="thumb" >
                  <a href="{LINK_TGT}" class="thumbLink" style="{ONE_WIDTH}">{THUMB}</a>
                </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" align="center" >&nbsp;</td>
<!-- END empty_cell -->

EOT;
/******************************************************************************
** Section <<<$template_film_strip>>> - END
******************************************************************************/

 WITH:


/******************************************************************************
** Section <<<$template_film_strip>>> - START
******************************************************************************/
// HTML template for filmstrip display
$template_film_strip = <<<EOT

        <tr>
          <td style="background-image: url({TILE1});background-repeat:repeat-x;"><img src="images/spacer.gif" width="1" height="1" alt="" border="0" /></td>
        </tr>
        <tr>
          <td valign="bottom" class="thumbnails filmstrip_background" align="center" style="{THUMB_TD_STYLE}">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                   <td width="50%" align="right"><a id="filmstrip_prev" rel="nofollow" style="cursor: pointer;"><img src="themes/google_images/images/film_prev.png"/></a></td>
                     <td valign="bottom"  style="{THUMB_TD_STYLE}">
                       <div id="film" style="{SET_WIDTH}"><table class="tape" ><tr>{THUMB_STRIP}</tr></table></div>
                     </td>
                   <td width="50%" align="left"><a id="filmstrip_next" rel="nofollow" style="cursor: pointer;"><img src="themes/google_images/images/film_next.png"/></a></td>
                </tr>
            </table>
          </td>
        </tr>
        <tr>
         <td style="background-image: url({TILE2});background-repeat:repeat-x;"><img src="images/spacer.gif" width="1" height="1" alt="" border="0" /></td>
        </tr>
<!-- BEGIN thumb_cell -->
                <td class="thumb" >
                  <a href="{LINK_TGT}" class="thumbLink" style="{ONE_WIDTH}">{THUMB}</a>
                </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" align="center" >&nbsp;</td>
<!-- END empty_cell -->

EOT;
/******************************************************************************
** Section <<<$template_film_strip>>> - END
******************************************************************************/

B) Then REPLACE height="1" in both:

        <tr>
          <td style="background-image: url({TILE1});background-repeat:repeat-x;"><img src="images/spacer.gif" width="1" height="1" alt="" border="0" /></td>
        </tr>
		
		AND 
		
		        <tr>
         <td style="background-image: url({TILE2});background-repeat:repeat-x;"><img src="images/spacer.gif" width="1" height="1" alt="" border="0" /></td>
        </tr>
		
with the height of your images. example: height="20" if the height of your images have height 20px.

C) Go to themes/google_images/images and replace tile1.gif and tile2.gif with your custom gif images

3) If you want images for the navbar not text on displyimage page (Report, Ecard, START, PREV, NEXT, END) 

A) FIND:

/******************************************************************************
** Section <<<$template_img_navbar>>> - START
******************************************************************************/
// HTML template for the image navigation bar
$template_img_navbar = <<<EOT

        <tr>
<!-- BEGIN pic_info_button -->
                <!-- button will be added by displayimage.js -->
                <td id="pic_info_button" align="center" valign="middle" class="navmenu" width="48"></td>
<!-- END pic_info_button -->
<!-- BEGIN slideshow_button -->
                <!-- button will be added by displayimage.js -->
                <td id="slideshow_button" align="center" valign="middle" class="navmenu" width="48"></td>
<!-- END slideshow_button -->
                <td align="center" valign="middle" class="navmenu" width="100%">{PIC_POS}</td>
<!-- BEGIN report_file_button -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{REPORT_TGT}" class="navmenu_pic" title="{REPORT_TITLE}" rel="nofollow">Report</a></td>
<!-- END report_file_button -->
<!-- BEGIN ecard_button -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}" rel="nofollow">Ecard</a></td>
<!-- END ecard_button -->
<!-- BEGIN nav_start -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{START_TGT}" class="navmenu_pic" title="{START_TITLE}">START</a></td>
<!-- END nav_start -->
<!-- BEGIN nav_prev -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}">PREV</a></td>
<!-- END nav_prev -->
<!-- BEGIN nav_next -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}">NEXT</a></td>
<!-- END nav_next -->
<!-- BEGIN nav_end -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{END_TGT}" class="navmenu_pic" title="{END_TITLE}">END</a></td>
<!-- END nav_end -->

        </tr>

EOT;
/******************************************************************************
** Section <<<$template_img_navbar>>> - END
******************************************************************************/

B) REPLACE WITH:

/******************************************************************************
** Section <<<$template_img_navbar>>> - START
******************************************************************************/
// HTML template for the image navigation bar
$template_img_navbar = <<<EOT

        <tr>
<!-- BEGIN pic_info_button -->
                <!-- button will be added by displayimage.js -->
                <td id="pic_info_button" align="center" valign="middle" class="navmenu" width="48"></td>
<!-- END pic_info_button -->
<!-- BEGIN slideshow_button -->
                <!-- button will be added by displayimage.js -->
                <td id="slideshow_button" align="center" valign="middle" class="navmenu" width="48"></td>
<!-- END slideshow_button -->
                <td align="center" valign="middle" class="navmenu" width="100%">{PIC_POS}</td>
<!-- BEGIN report_file_button -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{REPORT_TGT}" class="navmenu_pic" title="{REPORT_TITLE}" rel="nofollow"><img src="{LOCATION}images/navbar/report.png" border="0" align="middle" alt="{REPORT_TITLE}" /></a></td>
<!-- END report_file_button -->
<!-- BEGIN ecard_button -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}" rel="nofollow"><img src="{LOCATION}images/navbar/ecard.png"  border="0" align="middle" alt="{ECARD_TITLE}" /></a></td>
<!-- END ecard_button -->
<!-- BEGIN nav_start -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{START_TGT}" class="navmenu_pic" title="{START_TITLE}"><img src="{LOCATION}images/navbar/{START_IMAGE}" border="0" align="middle" alt="{START_TITLE}" /></a></td>
<!-- END nav_start -->
<!-- BEGIN nav_prev -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}"><img src="{LOCATION}images/navbar/{PREV_IMAGE}" border="0" align="middle" alt="{PREV_TITLE}" /></a></td>
<!-- END nav_prev -->
<!-- BEGIN nav_next -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}"><img src="{LOCATION}images/navbar/{NEXT_IMAGE}" border="0" align="middle" alt="{NEXT_TITLE}" /></a></td>
<!-- END nav_next -->
<!-- BEGIN nav_end -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{END_TGT}" class="navmenu_pic" title="{END_TITLE}"><img src="{LOCATION}images/navbar/{END_IMAGE}" border="0" align="middle" alt="{END_TITLE}" /></a></td>
<!-- END nav_end -->

        </tr>

EOT;
/******************************************************************************
** Section <<<$template_img_navbar>>> - END
******************************************************************************/

C) Open themes/google_images/images/navbar and replace the images with your custom images. They must be png images and have the same name.

4) Customize the custom drop down menu links: 

A) Open themes/google_images/template.html
B) FIND:

		    <div id="customMenu">
			  <ul id="menuslick">
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 1</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 2</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 3</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 4</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 5</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 6</a></li>
				<li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 7</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 8</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 9</a></li>			
                <li>Custom Link 10
                  <ul>
                    <li><a href="http://coppermine-gallery.net/" target="_blank">Subitem 1</a></li>
					<li><a href="http://coppermine-gallery.net/" target="_blank">Subitem 2</a></li>
					<li><a href="http://coppermine-gallery.net/" target="_blank">Subitem 3</a></li>
					<li><a href="http://coppermine-gallery.net/" target="_blank">Subitem 4</a></li>
				  </ul>
                </li>
			</ul>
			</div>
			
C) REPLACE <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 1</a></li> with your custom links.

5) ADD more social links to FOLLOW US or DELETE the social links.

A) Open themes/google_images/template.html
B) FIND:

	  <div id="social"><p>FOLLOW US</p> 
	    <a href="https://www.facebook.com/" target="_blank"><img src="themes/google_images/images/social/facebook.png" alt="facebook" title="facebook"/></a>
		<a href="https://twitter.com/" target="_blank"><img src="themes/google_images/images/social/twitter.png" alt="twitter" title="twitter"/></a>
		<a href="https://instagram.com/" target="_blank"><img src="themes/google_images/images/social/instagram.png" alt="instagram" title="instagram"/></a>	
    	<a href="https://plus.google.com/" target="_blank"><img src="themes/google_images/images/social/google-plus.png" alt="google-plus" title="google plus"/></a>
		<a href="https://www.youtube.com/" target="_blank"><img src="themes/google_images/images/social/youtube.png" alt="youtube" title="youtube"/></a>
	  	<div style="clear: both;"></div>
	  </div>
	  
C) Add more links for other social networks like tumblr etc.

D) Add the new social networks image in themes/google_images/images/social

E) To DELETE IT just delete the code from step 2 and open themes/google_images/styles.css and DELETE:

#social {
    width: 60%;
    float: left;
}
#social img {
    float: left;
	border: none;
}
#social a:link,
#social p {
    float: left;
	padding: 3%;
}

6) Icons used in the theme https://icomoon.io/#icons-icomoon

7) You can use your own smilies:

A) Open themes/google_images/smiles and replace the images with your custom images. They must be gif images and have the same name. 

8) You can use your own custom theme icons.

A) Open themes/google_images/images/icons and replace the images with your custom images. 
They must be png images and have the same name.

9) You can use your custom favicon.

A) Open themes/google_images and replace favicon.ico with your custom favicon.ico. 
There are many websites that can convert and transparent png or gif in ico file.
Just type in GOOGLE conver to ico file. I found this one http://image.online-convert.com/convert-to-ico

10) The folder themes/google_images/js contains the jquery and the css for the google imaages collage (collage folder) and the custom drop down menu (SlickNav folder).

11) To remove the SlickNav.

A) Open themes/google_images/template.html FIND and DELETE:

		    <div id="customMenu">
			  <ul id="menuslick">
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 1</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 2</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 3</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 4</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 5</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 6</a></li>
				<li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 7</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 8</a></li>
			    <li><a href="http://coppermine-gallery.net/" target="_blank">Custom Link 9</a></li>			
                <li>Custom Link 10
                  <ul>
                    <li><a href="http://coppermine-gallery.net/" target="_blank">Subitem 1</a></li>
					<li><a href="http://coppermine-gallery.net/" target="_blank">Subitem 2</a></li>
					<li><a href="http://coppermine-gallery.net/" target="_blank">Subitem 3</a></li>
					<li><a href="http://coppermine-gallery.net/" target="_blank">Subitem 4</a></li>
				  </ul>
                </li>
			</ul>
			</div>
			
B)  Open themes/google_images/style.css 

FIND and DELETE:

#customMenu {
    width: 5%;
    float: left;
    background: #FAFAFA;
	padding: 0.2% 0 0 0;
}
#menuslick {
	display:none;
}
	#customMenu,
	.slicknav_nav,
	#main_menu {
    width: 100%!important;
	padding: 0px!important;
	}
	
FIND:

#main_menu {
    padding: 0 0 0.5% 0;
    float: left;
    margin: 0;
    width: 95%;
	border-top: 1px solid rgba(0, 0, 0, 0.17);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #FAFAFA;
}

REPLACE WITH: 

#main_menu {
    padding: 0 0 0.5% 0;
    margin: 0;
    width: 100%;
	border-top: 1px solid rgba(0, 0, 0, 0.17);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #FAFAFA;
}

C) DELETE themes/google_images/js/SlickNav folder. 

12) To delete the search bar.

A) Open themes/google_images/template.html FIND AND DELETE:

	  <div id="searchForm">
		<form name="search" method="get" action="thumbnails.php">
            <div style="float:left;">
                <input type="text" maxlength="70" placeholder="Search" id="name" name="search">
            </div>
            <input type="hidden" name="title" value="on" />
            <input type="hidden" name="caption" value="on" />
            <input type="hidden" name="keywords" value="on" />
            <input type="hidden" name="filename" value="on" />
            <input type="hidden" name="album" value="search" />
            <input type="hidden" name="type" value="OR" />  
			<nav class="cl-effect-2" style="float:left;">
				<div id="buttonSumbit" style="float: left;padding-left:5px;">
					<a href="#"><span data-hover="Search" onclick="search.submit()">GO</span></a>
				</div>
			</nav>
            </form>
				<div style="clear: both;"></div>
			</div>  
			
B) Open themes/google_images/style.css FIND AND DELETE:

#searchForm {
    float: right;
    padding: 10px;
}
input[type="text"] {
    width: 200px;
    height: 17px;
}
#buttonSumbit a:link {
    color: #000000;
	text-decoration: none;
}

FIND and REPLACE:

#social {
    width: 60%;
    float: left;
}

WITH:

#social {
    width: 100%;
}

13) To delete social links and search form.

A) Open themes/google_images/template.html FIND AND DELETE:

	<div id="secondMenu">
	  <div id="social"><p>FOLLOW US</p> 
	    <a href="https://www.facebook.com/" target="_blank"><img src="themes/google_images/images/social/facebook.png" alt="facebook" title="facebook"/></a>
		<a href="https://twitter.com/" target="_blank"><img src="themes/google_images/images/social/twitter.png" alt="twitter" title="twitter"/></a>
		<a href="https://instagram.com/" target="_blank"><img src="themes/google_images/images/social/instagram.png" alt="instagram" title="instagram"/></a>	
    	<a href="https://plus.google.com/" target="_blank"><img src="themes/google_images/images/social/google-plus.png" alt="google-plus" title="google plus"/></a>
		<a href="https://www.youtube.com/" target="_blank"><img src="themes/google_images/images/social/youtube.png" alt="youtube" title="youtube"/></a>
	  	<div style="clear: both;"></div>
	  </div>		
	  <div id="searchForm">
		<form name="search" method="get" action="thumbnails.php">
            <div style="float:left;">
                <input type="text" maxlength="70" placeholder="Search" id="name" name="search">
            </div>
            <input type="hidden" name="title" value="on" />
            <input type="hidden" name="caption" value="on" />
            <input type="hidden" name="keywords" value="on" />
            <input type="hidden" name="filename" value="on" />
            <input type="hidden" name="album" value="search" />
            <input type="hidden" name="type" value="OR" />  
			<nav class="cl-effect-2" style="float:left;">
				<div id="buttonSumbit" style="float: left;padding-left:5px;">
					<a href="#"><span data-hover="Search" onclick="search.submit()">GO</span></a>
				</div>
			</nav>
            </form>
				<div style="clear: both;"></div>
			</div>  
       	<div style="clear: both;"></div>  
    </div>
	
B) Open themes/google_images/style.css FIND AND DELETE:

#secondMenu {
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    box-shadow: 0px 0px 10px #DDD;
	-webkit-box-shadow: 0px 0px 10px #DDD;
    -moz-box-shadow: 0px 0px 10px #DDD;
}
#social {
    width: 60%;
    float: left;
}
#social img {
    float: left;
	border: none;
}
#social a:link,
#social p {
    float: left;
	padding: 3%;
}
#searchForm {
    float: right;
    padding: 10px;
}
input[type="text"] {
    width: 200px;
    height: 17px;
}
#buttonSumbit a:link {
    color: #000000;
	text-decoration: none;
}

14) Bigger filmstrip images.

Open themes/google_images/style.css FIND:

.strip_image {
    max-width: 3vw!important;
    height: auto;
}

REPLACE 3 with a bigger number.

15) To edit the custom drop down menu look edit themes/google_images/js/SlickNav/slicknav.css